<script setup>
import { message } from 'ant-design-vue';
import {reactive} from 'vue'
import useToken from '@/stores/token.js'
import {login} from '@/api/user'
import {useRouter} from 'vue-router'

const router = useRouter()

// 表单数据
const formData = reactive({
    username:'demo',
    password:'zh@hm#23',
    isAgree:true
})

//submit提交事件
const onFinish = async (values)=>{
    // 调用状态管理器中的useToken函数，并结构出setToken
    const {setToken} = useToken()
    // console.log('Success:', values);
    const {data} = await login(values)
    setToken(data.token)
    message.success('登录成功')
    router.push('/')
    console.log(data.token)
}

</script>
<template>
    <div class="login">
        <div class="left">
            <img src="@/assets/login-bg-e4ea539c.svg" alt="黑马智数">
        </div>
        <div class="right">
            <div class="right_login">
                <h3>智慧园区-登录</h3>
                <a-form :model="formData" @finish="onFinish" :labelCol="{span: 3,offset: 120}" :wrapperCol="{span: 20}"  autocomplete="off">
                    <a-form-item name="username" label="账号" :rules="[{required:true,message:'账号不能为空'}]">
                        <a-input v-model:value="formData.username" type="text"></a-input>
                    </a-form-item>
                    <a-form-item name="password" label="密码" :rules="[{required:true,message:'密码不能为空'}]">
                        <a-input-password v-model:value="formData.password" type="password"></a-input-password>
                    </a-form-item>
                    <a-form-item >
                        <a-checkbox v-model:checked="formData.isAgree"></a-checkbox>
                        记住我
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" html-type="submit" block>登录</a-button>
                    </a-form-item>
                </a-form>
            </div>
        </div>
    </div>
</template>
<style lang="less">
.login{
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    .left{
        flex: 6;
        img{
            width: 100%;
        }
    }
    .right{
        display: flex;
        justify-content: center;
        align-items: center;
        flex:4;
        min-width: 300px;
        // background-color: green;
        .right_login{
            width: 400px;
            background-color: #ccc;
        }
    }
}

</style>